<template>
	<!-- 配送详情 -->
	<view class="page">
		<view class="order-nav">
			<view v-for="(statusItem, statusIndex) in statusList" :key="statusIndex" class="uni-tab-item" :id="statusItem.id"
			 :data-current="statusIndex" @click="ontabtap">
				<text class="uni-tab-item-title" :class="statusItem.status == orderStatus ? 'uni-tab-item-title-active color-base-border  color-base-text' : ''">
					{{ statusItem.name }}
				</text>
			</view>
		</view>
		<mescroll-uni @getData="getData" ref="mescroll" top="100">
			<block slot="list">
				<view class="list-group" v-if="orderStatus=='list'">
					<view class="list-item" v-for="(item,index) in dataList" :key="index">
						<image :src="$util.img(item.sku_image)" mode="widthFix"></image>
						<view class="shopping-detail">
							<view class="title">
								{{item.sku_name}}
							</view>
							<view class="shopping-msg">
								<view class="left">
									<text class="left-1">{{item.category_name_1}}</text>
									<text class="left-3">￥<text>{{item.goods_money}}</text></text>
								</view>
								<view class="right">
									X{{item.num}}
								</view>
							</view>
							<view v-if="item.refund_num > 0" class="refund-tips"> 
								<text class="iconfont icontishi"></text>
								<text>该商品有{{item.refund_num}}件发起了售后</text>
							</view>
						</view>
					</view>
				</view>
				<view class="order-group" v-if="orderStatus=='order'">
					<view class="order-item" v-for="(item,order_index) in order_list" :key="order_index">
						<view class="order-header">
							<text class="site-name font-size-base">{{item.order_no}}</text>
							<text class="status-name color-base-text">{{item.order_status_name}}</text>
							<!-- 	<text class="status-name color-text-green" v-else-if="orderItem.is_settlement == 1">已结算</text>
								<text class="status-name color-text-orange" v-else>待结算</text> -->
						</view>

						<view class="order-body">
							<view class="goods-wrap" v-for="(ites,ites_index) in item.order_goods">
								<view class="goods-img">
									<!-- 	<image :src="$util.img(orderItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex)" mode="aspectFill"
										 :lazy-load="true"></image> -->
									<image :src="$util.img(ites.sku_image)" mode="aspectFill"></image>
								</view>
								<view class="goods-info">
									<view class="top-wrap">
										<view class="goods-name font-size-base">{{ites.sku_name}}</view>
										<text class="color-tip font-size-tag">预计送达:</text>
										<text class="color-tip font-size-tag">{{ $util.timeStampTurnTime(item.arrive_time) }}</text>
									</view>
									<view class="goods-sub-section">
										<view class="goods-price">
											<text class="unit color-base-text">￥</text>
											<text class="color-base-text font-size-toolbar">{{ites.goods_money}}</text>
											<text class="color-base-text font-size-tag padding-left" v-if="ites.refund_status_name">{{ites.refund_status_name}}</text>
										</view>
										<view>
											<text>
												<text class="iconfont iconclose"></text>
												{{ites.num}}
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="order-footer">
							<view class="order-base-info active">
								<view class="order-type ">
									<text class="color-tip">
										{{ $util.timeStampTurnTime(item.create_time) }}
									</text>
									<!-- <text>返{{ fenxiaoWords.account }}金额：</text>
										<text class="color-base-text">{{ $lang('common.currencySymbol') }}{{ orderItem.commission }}</text> -->
								</view>
								<view class="total">
									<text>合计：</text>
									<text class="color-base-text">￥</text>
									<text class="font-size-toolbar color-base-text">{{item.order_money}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<block v-if="orderStatus=='aftersale'">
					<block v-if="activist_list.length">
						<view class="order-item" v-for="(item, index) in activist_list" :key="index">
							<view class="order-header">
								<text class="status-num font-size-base">{{ item.order_no }}</text>
								<view class="status-name" v-if="item.refund_status == 3">退款成功</view>
								<view class="status-name color-base-text" v-if="item.refund_status == 1">退款中</view>
								<view class="status-name color-base-text" v-if="item.refund_status == -1">退款失败</view>
							</view>
							<view class="goods-wrap">
								<image :src="$util.img(item.sku_image, { size: 'mid' })" @error="imageError(index)" mode="aspectFill"
								 :lazy-load="true"></image>
								<view class="goods-info">
									<view class="goods-name" @click="refundDetail(item.order_goods_id)">{{ item.sku_name }}</view>
									<view class="goods-num">
										<view class="num-text color-base-text">{{ item.refund_status_name }}</view>
										<view class="num-price">
											<text>￥{{ item.price }}</text>
											<text class="num">×{{ item.num }}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="goods-btn">
								<view class="btn-text">
									<text>共{{ item.num }}件商品</text>
								</view>
								<view class="order-action">
								</view>
							</view>
						</view>
					</block>
					<view class="cart-empty" v-else>
						<ns-empty :isIndex="!1" text="暂无售后记录"></ns-empty>
					</view>
				</block>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusList: [{
						status: 'list',
						name: '商品清单',
						id: 'status_1'
					},
					{
						status: 'order',
						name: '相关订单',
						id: 'status_2'
					},
					{
						status: 'aftersale',
						name: '售后订单',
						id: 'status_3'
					}
				],
				orderStatus: 'list',
				dataList: [],
				order_list: [],
				activist_list: [],
				delivery_id: 0,
				token: ''
			}
		},
		onLoad(option) {
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open('/pages/member/index/index');
			} else {
				this.token = uni.getStorageSync('token')
			}
			if (option.id) {
				this.delivery_id = option.id
			}
			setTimeout(() => {
				this.$refs.loadingCover.hide();
			}, 2000)
		},
		methods: {
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.orderStatus = this.statusList[index].status;
				console.log(this.orderStatus)
				this.$refs.loadingCover.show();
				this.$refs.mescroll.refresh();
			},
			getData(mescroll) {
				if (this.orderStatus == 'aftersale') {
					this.$api.sendRequest({
						url: '/api/communitydelivery/refundorder',
						data: {
							page: mescroll.num,
							page_size: mescroll.size,
							delivery_id: this.delivery_id
						},
						success: res => {
							this.showEmpty = true;
							let newArr = [];
							let msg = res.message;
							if (res.code == 0 && res.data) {
								newArr = res.data.list;
							} else {
								this.$util.showToast({
									title: msg
								});
							}
							mescroll.endSuccess(newArr.length);
							//设置列表数据
							if (mescroll.num == 1) this.activist_list = []; //如果是第一页需手动制空列表
							this.activist_list = this.activist_list.concat(newArr);
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						},
						fail: res => {
							mescroll.endErr();
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					});
				} else {
					let _url = ''
					if (this.orderStatus == 'list') {
						_url = '/api/Communitydelivery/goodsGather'
					} else {
						_url = '/api/order/deliveryOrderList'
					}
					this.mescroll = mescroll
					this.$api.sendRequest({
						url: _url,
						data: {
							delivery_id: this.delivery_id,
							role_type: 'clerk'
						},
						success: res => {
							
							if (this.orderStatus == 'list') {
								let newArr = [];
								let msg = res.message;
								if (res.code == 0 && res.data) {
									newArr = res.data.data;
								} else {
									this.$util.showToast({
										title: msg
									});
								}
								mescroll.endSuccess(newArr.length);
								//设置列表数据
								if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
								this.dataList = this.dataList.concat(newArr); //追加新数据
								if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
							} else {
								let newArr = [];
								let msg = res.message;
								if (res.code == 0 && res.data) {
									newArr = res.data.list;
								} else {
									this.$util.showToast({
										title: msg
									});
								}
								mescroll.endSuccess(newArr.length);
								//设置列表数据
								if (mescroll.num == 1) this.order_list = []; //如果是第一页需手动制空列表
								this.order_list = this.order_list.concat(newArr); //追加新数据
								if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
								
							}
						},
						fail: res => {
							mescroll.endErr();
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	@import './public/css/activist.scss';
	
	.page {
		.order-nav {
			width: 100vw;
			height: 90rpx;
			flex-direction: row;
			/* #ifdef H5 */
			// padding-top: 14rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
			background: #fff;
			display: flex;
			// border-bottom-left-radius: 24rpx;
			// border-bottom-right-radius: 24rpx;
			// padding-bottom: 30rpx;
			/* #ifdef H5 */
			// padding-bottom: 20rpx;
			/* #endif */
			position: fixed;
			left: 0;
			z-index: 998;

			.uni-tab-item {
				flex: 1;
				padding-left: 24rpx;
				padding-right: 24rpx;
			}

			.uni-tab-item-title {
				font-size: $font-size-base;
				display: block;
				height: 86rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #fff;
				padding: 0 10rpx;
				flex-wrap: nowrap;
				/* #ifndef APP-PLUS */
				white-space: nowrap;
				/* #endif */
				text-align: center;
				font-size: 30rpx;
			}

			.uni-tab-item-title-active {
				display: block;
				height: 86rpx;
				border-bottom: 2px solid #ffffff;
				padding: 0 10rpx;
			}

			::-webkit-scrollbar {
				width: 0;
				height: 0;
				color: transparent;
			}
		}

		.list-group {

			.list-item {
				display: flex;
				padding: $padding;
				background-color: white;
				margin: 0 $margin-both;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 15rpx;
				}

				.shopping-detail {
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.title {
						font-size: $font-size-base;
						color: $color-title;
						width: 450rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.shopping-msg {
						width: 450rpx;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: flex-start;
							flex-direction: column;
							line-height: 1.6;

							.left-1 {
								color: #909399;
								font-size: $font-size-sub;
							}

							.left-2 {
								font-size: $font-size-sub;
								color: #FF4544;

								text {
									margin-left: 10rpx;
								}
							}

							.left-3 {
								color: #FF4544;
								font-size: $font-size-sub;

								text {
									font-weight: bold;
								}
							}
						}

						.right {
							font-size: 28rpx;
						}
					}
					
					.refund-tips {
						padding: 4rpx 20rpx;
						margin-top: 10rpx;
						color: #FF6706;
						font-size: 24rpx;
						background: rgba(255,103,6,0.1);
						line-height: 1.4;
						width: 100%;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						
						.icontishi {
							margin-right: 10rpx;
						}
					}
				}
			}

			.list-item:first-child {
				margin-top: $margin-updown;
			}
		}

		.order-group {

			.order-item {
				padding: $padding;
				background-color: white;
				margin: 0 $margin-both;
				box-sizing: border-box;
				border-radius: 10rpx;
				background: #ffffff;
				position: relative;
				margin-bottom: 18rpx;

				.order-header {
					display: flex;
					align-items: center;
					position: relative;
					padding-bottom: 24rpx;
					line-height: 1;
					font-size: $font-size-goods-tag;

					.icondianpu {
						display: inline-block;
						line-height: 1;
						margin-right: 12rpx;
					}

					.status-name {
						flex: 1;
						text-align: right;
					}
				}

				.order-body {
					margin-bottom: 24rpx;

					.goods-wrap {
						display: flex;
						position: relative;

						&:last-of-type {
							margin-bottom: 0;
						}

						.goods-img {
							width: 170rpx;
							height: 170rpx;
							padding: 20rpx 0 0 0;
							margin-right: 5rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: $border-radius;
							}
						}

						.goods-info {
							flex: 1;
							position: relative;
							padding: 20rpx 0 0 0;
							max-width: calc(100% - 200rpx);
							margin-left: 18rpx;
							display: flex;
							flex-direction: column;

							.top-wrap {
								flex: 1;
							}

							.goods-name {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								line-height: 1.5;
								font-size: $font-size-goods-tag;
								color: #000;
							}

							.goods-sub-section {
								width: 100%;
								line-height: 1.5;
								display: flex;
								align-items: center;
								font-size: $font-size-goods-tag;
								margin-top: 20rpx;

								.unit {
									font-size: $font-size-tag;
									margin-right: 2rpx;
								}
								
								.goods-price {
									flex: 1;
								}

								view {
									line-height: 1;

									&:last-of-type {
										text-align: right;

										.iconfont {
											line-height: 1;
											font-size: $font-size-tag;
										}
									}
								}
							}

							.order-time {
								margin-top: 6px;
								font-size: $font-size-goods-tag;
								color: #838383;

								.goods-price {
									font-size: $font-size-goods-tag;
									float: right;
									color: #000;
									
								}
							}
						}
					}
				}

				.order-footer {
					padding-top: 24rpx;

					.order-base-info {
						display: flex;

						.total {
							text-align: right;
							padding-top: 20rpx;
							flex: 1;
							font-size: $font-size-goods-tag;

							&>text {
								line-height: 1;
							}
						}

						.order-type {
							font-size: $font-size-goods-tag;

							&>text {
								line-height: 1;
							}
						}
					}

					.order-base-info.active {
						.total {
							padding-top: 0;
						}

						.order-type {
							padding-top: 0;
						}
					}
				}
			}

			.order-item:first-child {
				margin-top: $margin-updown;
			}

			.order-item:last-child {
				border: none;
			}
		}



	}
</style>
<style scoped>

</style>
